<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/asset-favicon.ico">
    <title>社交-问答详情</title>
    <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-base.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css" />
    <link rel="stylesheet" type="text/css" href="./css/page-sj-qa-detail.css" />
    <link rel="stylesheet" href="./css/element.css">
    <style>
        .reply_item {
            padding-bottom: 10px;
            padding-top: 10px;
            border-bottom: 1px solid #ccc;
        }

        .problem-detail .answer-intro {
            border: 0;
        }

        .parent {
            padding: 10px;
            background: #FBF9DF;
            border: 1px solid #ccc;
        }
        .comment-list{
            margin-top: 10px;
            border:1px solid #f0f0f0;
            border-top: none;
        }
        .comment-list .comment_pointer{
            height: 9px;
            border-top: 1px solid #f0f0f0;
            position: relative;
        }
        .comment-list .comment_pointer span{
            width: 15px;
            height: 9px;
            display: block;
            background: url(img/pointer_up.png) white;
            position: absolute;
            left: 80px;
            top: -8px;
        }

        .comment-list ul{
            list-style: none;
        }
        .comment-list ul li{
            border-bottom: 1px dashed #e7e7e7;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <header>
        </header>
    </div>
    <!--两列布局-->
    <div class="wrapper qa-content" id="app">

        <div class="qa-title">
            <div class="fl title">
                <h2>{{problemItem.title}}</h2>
                <p>
                    <span class="tag" v-for='item in problemItem.labels' style="margin-left:5px">{{item}}</span>
                    <span class="author">{{problemItem.user}}</span>
                    <span>{{calculatDurationDisplay(problemItem.createtime)}}前提问 · {{calculatDurationDisplay(problemItem.createtime)}}前更新</span>
                </p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="fl left-list">
            <div class="problem-detail">
                <div class="title-intro">
                    <div class="sidebar">
                        <button type="button" class="like" data-placement="right" data-toggle="tooltip" title="问题对人有帮助，内容完整，我也想知道答案">
                            <i class="fa fa-caret-up" aria-hidden="true" @click='thumbup_problem'></i>
                        </button>
                        <span class="count">{{problemItem.useful_count}}</span>
                        <button type="button" class="hate" data-placement="right" data-toggle="tooltip" @click='thumbdown_problem' title="问题没有实际价值，缺少关键内容，没有改进余地">
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="title">
                        <div class="detail" v-html="problemItem.content">
                        </div>
                        <div class="clearfix"></div>
                        <div class="operate">
                            <span class="time">{{calculatDurationDisplay(problemItem.createtime)}}前提问</span>
                            <span class="comment" @click='show_comment=!show_comment'>评论</span>
                        </div>
                        <div class="comment-box" v-if='show_comment'>
                            <div class="comment-form">
                                <textarea row="2" placeholder="使用评论询问更多信息或提出修改意见" v-model='problem_content'></textarea>
                                <button class="sui-btn submit-comment" @click="publish_comment">提交评论</button>
                            </div>
                        </div>
                        <div class="comment-list" v-show="problemItem.comment_question.length>0">
                            <div class="comment_pointer"><span></span></div>
                            <ul>

                                <li v-for="item in problemItem.comment_question">
                                    <img :src="item.user.avatar?item.user.avatar:'./img/widget-photo.jpg'" alt="" style="width: 20px;height: 20px;">
                                       {{item.user.username}}的评论:{{item.content}}
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="answer-intro">
                    <h4 class="answer-num">{{problemItem.answer_question.length}}个回答</h4>
                    <div class="reply_item" v-for="(item,index) in problemItem.answer_question">
                        <div class="sidebar">
                            <button type="button" class="like" @click='thumbup_reply(item.id, index)' data-placement="right" data-toggle="tooltip" title="问题对人有帮助，内容完整，我也想知道答案">
                                <i class="fa fa-caret-up" aria-hidden="true"></i>
                            </button>
                            <span class="count">{{item.useful_count}}</span>
                            <button type="button" class="hate" data-placement="right" @click='thumbdown_reply(item.id, index)' data-toggle="tooltip"
                                title="问题没有实际价值，缺少关键内容，没有改进余地">
                                <i class="fa fa-caret-down" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="title">
                            <p>{{item.content}}</p>

                            <div class="title parent" v-if="item.parent">
                                <p>{{item.parent.content}}</p>
                                <div class="operate">
                                    <div class="tool pull-left">
                                        <span class="time">{{calculatDurationDisplay(item.parent.createtime)}}前评论</span>
                                    </div>
                                    <div class="myanswer pull-right">
                                        <img :src="item.parent.user.avatar?item.parent.user.avatar:'./img/widget-photo.jpg'" alt="">
                                        <a href="javascript">{{item.parent.user.username}}的回答</a>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                            <div class="operate">
                                <div class="tool pull-left">
                                    <span class="time">{{calculatDurationDisplay(item.createtime)}}前评论</span>
                                    <span class="comment" @click='show_comment_index==index?show_comment_index=-1:show_comment_index=index'>评论</span>
                                </div>
                                <div class="myanswer pull-right">
                                    <img :src="item.user.avatar?item.user.avatar:'./img/widget-photo.jpg'" alt="">
                                    <a href="javascript">{{item.user.username}}的回答</a>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="comment-box" v-show="show_comment_index==index">
                                <div class="comment-form">
                                    <textarea row="1" placeholder="使用评论询问更多信息或提出修改意见" v-model='problem_content'></textarea>
                                    <button class="sui-btn submit-comment" @click='publish_comment_reply'>提交评论</button>
                                </div>
                            </div>
                            <div class="comment-list" v-show="item.subs.length>0">
                                <div class="comment_pointer"><span></span></div>
                                <ul>
                                    <li v-for="a in item.subs">
                                        <img :src="a.user.avatar?a.user.avatar:'./img/widget-photo.jpg'" alt="" style="width: 20px;height: 20px;">
                                       {{a.user.username}}的评论:{{a.content}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="edit-answer">
                        <h4>撰写答案</h4>
                        <div class="edit-tip">
                            <textarea v-model='answer_content' rows="6" placeholder="你正在撰写答案,如果你是要对问题或其他回答进行点评或询问，请使用“评论”功能。" class="form-control" style="width:100%"></textarea>
                            <div class="remark" style="height: 30px;"><button class="sui-btn btn-info" style="float:right;margin-top: 10px" @click="answer">回答</button></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="fl right-tag">
            <div class="similar-problem">
                <h3 class="title">相似问题</h3>
                <ul class="problem-list">
                    <li class="list-item" v-for="(item,index) in problem_list">
                        <p class="list-title">{{item.title}}</p>
                        <p class="list-info">
                            <a :href="'./qa-detail.html?id='+item.id" target="_blank">{{item.reply}} 回答</a> | {{item.solve?'已解决':'未解决'}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <div class="wrapper">
                <div class="footer-bottom">
                    <div class="link">
                        <dl>
                            <dt>网站相关</dt>
                            <dd>关于我们</dd>
                            <dd>服务条款</dd>
                            <dd>帮助中心</dd>
                            <dd>编辑器语法</dd>
                        </dl>
                        <dl>
                            <dt>常用链接</dt>
                            <dd>传智播客</dd>
                            <dd>传智论坛</dd>
                        </dl>
                        <dl>
                            <dt>联系我们</dt>
                            <dd>联系我们</dd>
                            <dd>加入我们</dd>
                            <dd>建议反馈</dd>
                        </dl>
                        <dl>
                            <dt>关注我们</dt>
                            <dd>微博</dd>
                            <dd>twitter</dd>
                        </dl>

                        <div class="xuke">
                            <h3>内容许可</h3>
                            <p>除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可</p>
                            <p>本站由 传智研究院 提供更新服务</p>
                        </div>
                    </div>


                    <p class="Copyright">Copyright © 2017 传智问答社区 当前版本 0.0.1</p>
                </div>
            </div>

        </div>
        <script>
        </script>
</body>
<script src="js/host.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qa_detail.js"></script>